<template>
  <div style="overflow: hidden;height:83vh;margin-bottom: 4vw">
    <pull-to
      :bottom-load-method="infiniteHandler"
      :is-top-bounce=false
      :bottom-config="BOTTOM_DEFAULT_CONFIG"
      class="file-lists" style="padding-bottom: 12vw">
      <div class="imgBox">
        <div class="holeBox" style="float:left;"   v-for="(v,i) in commendList" :key="i">
          <router-link :to="'/articleDetail?article_id='+v.acticle_id">
            <img :src="v.image.img_url" alt="">
            <p>{{v.article_title}}</p>
            <div style="color: #333;font-size: 10px;">
              <img :src="v.head_ico"  alt="" style="border-radius:50%;width:6.67vw;height: 6.67vw;float: left;margin-left: 2vw;margin-bottom: 2vw;">
              <span style="float: left;line-height: 6.8vw;margin-left: 1vw;font-size: 10px;    white-space: nowrap;text-align: left; overflow: hidden;
              text-overflow: ellipsis;width: 22vw;">{{v.user_name}}</span>
              <span style="float: right;margin-top: 0vw;margin-right: 2vw">
                <van-icon name="like-o" size="3.5vw" style="margin-top: 1vw;position: relative;top: 1vw;"/>
                <span style="position:relative;top: 1px;">{{v.thumbs_num}}</span>
              </span>
            </div>
          </router-link>
          <span  class="show-msg" v-show="commendList.all_page==0">这里什么都没有了哦</span>
        </div>
      </div>
    </pull-to>
  </div>
</template>

<script>
  import PullTo from 'vue-pull-to'
  import request from '../request/index'
  export default {
    name: "goodsCommend",
    props: ['category_id'],
    components: {
      PullTo
    },
    data() {
      return {
        commendList: [],
        reset: [],
        all_page: [],
        pages:1,
        BOTTOM_DEFAULT_CONFIG: {
          pullText: "上滑继续加载",
          triggerText: "释放更新",
          loadingText: "加载中,请稍后",
          doneText: "内容已全部展示了",
          failText: "加载失败",
          loadedStayTime: 1000,
          stayDistance: 50,
          triggerDistance: 50,
          list: ""
        },
      }
    },
    methods: {
      infiniteHandler(loaded) {
       request.loadMoreclubList(this,loaded);
      }

    },
    created(){
      request.clubList(this);

    },
  }
</script>

<style scoped lang="scss">

  .file-lists{
    width:100%;
    height: 100%;
  }
  .page{
    width: 92vw;
    margin: 0px auto;
    margin-top: 5vw;
  }
  .imgBox{
    width: 96vw;
    overflow: scroll;
    position:relative;
    margin: 0px auto;
    //column-count: 2;
    //column-gap: 0;
    /* margin-top: 18vw;*/
    .holeBox:nth-child(odd){
      float:left !important;
    }
    .holeBox:nth-child(even){
      float: right !important;
    }
    .holeBox{
      //break-inside: avoid;
      // position: absolute;
      width: 42.67vw;
      height: auto;
      display: inline-block;
      background: #fff;
      box-shadow: 0px 0 5px 2px #f5f5f5;
      border-radius:2vw;
      overflow: hidden;
      margin:2.5vw;
      /* position: absolute;*/
      img{
        width: 42.67vw;
        height:42.67vw;
        display: inline-block;
      }
      p{
        font-size: 15px;
        color: #333;
        text-align: left;
        margin-left:2vw;
        margin-bottom: 2vw;
        height: 10vw;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
  }
  @media screen and(max-width: 375px)and (min-width: 320px){
    p{
      font-size: 13px !important;
    }
  }
</style>
